<template>
  <div>
    <basicContainer>
      <vProForm
        :inline="false"
        :data="searchData"
        label-position="right"
        label-width="90px"
        :items="searchCfg"
        :formAction="searchAction"
      >
        <template #custom>
          <div style="color: red">自定义模版插槽</div>
        </template>
      </vProForm>
    </basicContainer>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import vProForm from '../components/vpro-materials/vpro-form/index.js'
import basicContainer from '../components/vpro-materials/basic-container/index.js'

let searchData = reactive({
  input: '',
  inputNumber: '',
  inputPassword: '',
  textarea: '',
  acceptType: '0',
  select: '0',
  radioMap: 1,
  timeSelect: '1',
  checkboxKey: ['0'],
  timePickerTime: '',
  datetimerangeTime: '',
  startTime: '',
  endTime: '',
  coverImages: [],
  text: '纯文本内容'
})
let searchCfg = [
  {
    type: 'customLabel',
    dataIndex: 'afterSalesSn',
    customLabel: '<div>插入HTML代码</div>'
  },
  {
    type: 'input',
    title: '文本输入',
    dataIndex: 'input'
  },
  {
    type: 'inputNumber',
    title: '数字',
    dataIndex: 'inputNumber'
  },
  {
    type: 'inputPassword',
    title: '密码',
    dataIndex: 'inputPassword'
  },
  {
    type: 'textarea',
    title: '文本域',
    dataIndex: 'textarea'
  },
  {
    type: 'select',
    title: '下拉选择',
    dataIndex: 'select',
    placeholder: '请选择',
    label: 'value',
    options: [
      {
        select: '0',
        value: '全部'
      },
      {
        select: '1',
        value: '选项1'
      },
      {
        select: '2',
        value: '选项2'
      },
      {
        select: '3',
        value: '选项3'
      }
    ]
  },
  {
    type: 'radioMap',
    dataIndex: 'radioMap',
    title: '单选',
    options: {
      单选1: 1,
      单选2: 2
    }
  },
  {
    type: 'radioButton',
    title: '时间单选',
    dataIndex: 'timeSelect',
    label: 'value',
    options: [
      {
        timeSelect: 1,
        value: '7天'
      },
      {
        timeSelect: 2,
        value: '14天'
      }
    ]
  },
  {
    type: 'checkbox',
    dataIndex: 'checkboxKey',
    label: 'value',
    title: '多选',
    options: [
      {
        checkboxKey: '0',
        value: '多选'
      },
      {
        checkboxKey: '1',
        value: '多选1'
      },
      {
        checkboxKey: '2',
        value: '多选2'
      }
    ]
  },
  {
    title: '时间',
    type: 'time',
    timeAttributes: {
      type: 'timeSelect'
    },
    dataIndex: 'returnTime'
  },
  {
    title: '日期时间',
    type: 'time',
    timeAttributes: {
      type: 'timePicker'
    },
    dataIndex: 'timePickerTime'
  },
  {
    title: '时间区间',
    type: 'time',
    timeAttributes: {
      type: 'datetimerange'
    },
    dataIndex: 'datetimerangeTime'
  },
  {
    type: 'datetimerange',
    title: '日期时间区间',
    dataIndex: {
      startTime: 'startTime',
      endTime: 'endTime'
    },
    placeholder: ['请选择开始时间', '请选择结束时间']
  },
  {
    type: 'upload',
    title: '文件上传',
    dataIndex: 'organizationFile',
    uploadAttributes: {
      accept: '',
      httpRequest: (file) => {
        console.log(file)
      }
    }
  },
  {
    type: 'uploadImage',
    dataIndex: 'coverImages',
    title: '图片上传',
    uploadAttributes: {
      limit: 1,
      imageName: 'imageUrl',
      accept: 'image/jpeg, image/jpg, image/png',
      httpRequest: (file) => {
        console.log(file)
      }
    }
  },
  {
    type: 'custom',
    title: '自定义',
    dataIndex: 'custom'
  },
  {
    type: 'text',
    title: '纯文本',
    dataIndex: 'text'
  }
]
let searchAction = [
  {
    title: '重置',
    auth: '',
    isClear: true
  },
  {
    title: '提交',
    type: 'primary',
    click: (e) => {
      console.log({ ...searchData })
    }
  }
]
</script>
<style scoped lang="scss">
::v-deep(.el-button--primary) {
  background-color: #419641;
  border: 1px solid #419641;
}
</style>
